﻿<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>SimplePop</title>  

    <link rel="stylesheet" href="simplepop.css">

    <!-- <link rel="stylesheet" href="main.css"> -->

    <script src="jquery-1.11.1.min.js" type="text/javascript"></script>

    <script src="simplepop.js"></script>

    <script>

        $(function () {

            $("#btnAlert").click(function () {

                SimplePop.alert("你看到的是SimplePop");

            });

            $("#btnPrompt").click(function () {

                 SimplePop.prompt("你看到的是SimplePop",{

                    type: "confirm",

                    cancel: function(){

                        alert("cancle");

                    },

                    confirm: function(msg){

                        alert(msg);

                    }

                });

            });

            $("#btnConfirm").click(function () {

                SimplePop.confirm("你看到的是SimplePop",{

                    type: "error",

                    cancel: function(){

                        alert("cancle");

                    },

                    confirm: function(){

                        alert("confirm");

                    }

                });

            });

            

        });

    </script>

</head>

<body>

    <h1>SimplePop弹层插件API（兼容IE7+）</h1>

    <table class='table'>

        <caption>实例演示</caption>

        <tr align='center'>

            <th width="120">示例</th>

            <th>最简洁的调用</th>

        </tr>

        <tr>

            <td class="example">

                <button id="btnAlert" type="button">提示信息</button>

            </td>

            <td class='code'> SimplePop.alert("你看到的是SimplePop");</td>

        </tr>

        <tr>

            <td class="example">

                <button id="btnPrompt" type="button">输入框</button>

            </td>

            <td class='code'>

                SimplePop.prompt("你看到的是SimplePop",{

                    type: "confirm",

                    cancel: function(){

                        alert("cancle");

                    },

                    confirm: function(msg){

                        alert(msg);

                    }

                });

            });

            </td>

        </tr>

        

        <tr>

            <td class="example">

                <button id="btnConfirm" type="button">询问信息</button>

            </td>

            <td class='code'>

                SimplePop.confirm("你看到的是SimplePop",{

                    cancel: function(){

                        alert("cancle");

                    },

                    confirm: function(){

                        alert("confirm");

                    }

                });

            </td>

        </tr>





    </table>

    <br />

    <table class='table'>

        <caption>公共属性</caption>

        <tr align='center'>

            <th width="120">基本参数</th>

            <th>说明</th>

        </tr>

        <tr>

            <td class="example">icon</td>

            <td class="remark">弹出的标题图标(图标路径)</td>

        </tr>

        <tr>

            <td class="example">type</td>

            <td class="remark">显示的内容图标类型，默认为“info”</td>

        </tr>

        <tr>

            <td class="example">title</td>

            <td class="remark">弹出的标题文本</td>

        </tr>

        <tr>

            <td class="example">width</td>

            <td class="remark">弹出的层的宽度(默认：0)</td>

        </tr>

        <tr>

            <td class="example">height</td>

            <td class="remark">弹出的层的高度(默认：0)</td>

        </tr>

        <tr align='center'>

            <th width="120">样式参数</th>

            <th></th>

        </tr>

        <tr>

            <td class="example">background</td>

            <td class="remark">遮罩层背景色(默认：#000(黑色))</td>

        </tr>

        <tr>

            <td class="example">opacity</td>

            <td class="remark">透明度(0：完全透明；1：不透明，默认：0.5)</td>

        </tr>

        <tr>

            <td class="example">duration</td>

            <td class="remark">

                三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)，(默认:"normal")

            </td>

        </tr>

        <tr>

            <td class="example">showTitle</td>

            <td class="remark">是否显示标题(默认：true)</td>

        </tr>

        <tr>

            <td class="example">dragOpacity</td>

            <td class="remark">drag为true时，拖动弹层时的透明度(默认：1(不透明))</td>

        </tr>

        <tr align='center'>

            <th width="120">动作参数</th>

            <th></th>

        </tr>

        <tr>

            <td class="example">escClose</td>

            <td class="remark">是不可以按下“ESC”关闭(默认：true)</td>

        </tr>

        <tr>

            <td class="example">popMaskClose</td>

            <td class="remark">是否可以点击遮罩层关闭 (默认：false)</td>

        </tr>

        <tr>

            <td class="example">drag</td>

            <td class="remark">是否可以拖动弹层(默认：true)</td>

        </tr>

        <tr>

            <td class="example">content</td>

            <td class="remark">自定义内容区域</td>

        </tr>

    </table>

    <table class='table'>

        <caption>公共方法</caption>

        <tr align='center'>

            <th width="120">名称</th>

            <th>说明</th>

        </tr>

        <tr>

            <td class="example">closeSimplePop();</td>

            <td class="remark">

                调用关闭弹层

            </td>

        </tr>

    </table>

    <table class='table'>

        <caption>要求</caption>

        <tr align='center'>

            <th width="120">名称</th>

            <th>说明</th>

        </tr>

        <tr>

            <td class="example">jquery-1.11.1</td>

            <td class="remark">该插件基于jquery1.11.1框架开发，请在调用前务必先引用合适文件</td>

        </tr>

    </table>

    

</body>

</html>